<template>
    <li class="conponent-item-homework">
        <p>截止到 · {{info.overtime}}</p>

        <h3 @click="viewDetail()">{{info.title}}</h3>

        <p v-if="info.detail">
            {{limitLength(info.detail)}}
        </p>

        <p>
            <span v-if="info.isOver">已截止</span>
            <span v-if="info.isPush" class="is-push">已提交</span>
            <span v-if="!info.isPush" class="not-push">未提交</span>
        </p>
    </li>
</template>

<script>
    module.exports = {
        props: {
            info: {
                coerce: function (h) {
                    var t = new Date(h.overtime);
                    return {
                        overtime: `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`,
                        id: h._id,
                        isOver: h.overtime < new Date().getTime(),
                        isPush: h.files && h.files.length > 0 || false,
                        detail: h.description,
                        title: h.title
                    }
                }
            },
            link: String
        },
        methods: {
            viewDetail: function () {
                router.go({name: this.link, params: {id: this.info.id}});
            },
            limitLength: function (detail) {
                if (detail.length > 40) {
                    return detail.substr(0, 40) + '...';
                } else {
                    return detail
                }
            }
        }
    }
</script>